<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="4" :style="{ marginBottom: '24px' }">
        <!-- <chart-card :loading="loading" title="今天注册用户数" :total="register">
          <a-tooltip title="指标说明" slot="action">
           
            <a-icon type="info-circle-o" />
          </a-tooltip>
         
          <trend  style="margin-right: 16px;">
              <span slot="term">周同比</span>
              12%
            </trend>
          
        </chart-card> -->

         <chart-card :loading="loading" title="今天注册用户数" :total="register">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
          
          </div>
          <template slot="footer">总用户数：{{registerSum}}</template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="4" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="今天借款申请" :total="loanLog">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div></div>
           <template slot="footer">总借款申请：{{loanLogSum}}</template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="4" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="今天提现订单" :total="withdraw">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div></div>
           <template slot="footer">总提现订单：{{withdrawSum}}</template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="4" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="短信剩余条数" :total="sms">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div></div>
            <template slot="footer">总短息剩余数：{{smsSum}}</template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="4" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="今天借款金额(元)" :total="price">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div></div>
            <template slot="footer">总借款：{{priceSum}}</template>
        </chart-card>
      </a-col>
    </a-row>
    <div style="background:white">
      <div style="padding:20px">系统客服入口</div>
      <div class="indexCenter">
        <a-input style="width:50%;height:38px;margin-left:7%" />
        <a-button type="primary" style="height:38px;margin-left:5px">进入客服</a-button>
      </div>
    </div>

    <div style="background:white;margin-top:30px">
      <div style="padding:20px">系统公告</div>
      <div class="indexCentera">
        <a-textarea style="margin-left:7%;width:50%;margin-bottom:15px;height:100px" placeholder="Controlled autosize" :auto-size="{ minRows: 3, maxRows: 5 }" />
         <a-input style="width:50%;height:38px;margin-left:7%" />
      </div>
    </div>

  </div>
</template>

<script>
import moment from 'moment'
import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  RankList,
  Bar,
  Trend,
  NumberInfo,
  MiniSmoothArea,
} from '@/components'
import { mixinDevice } from '@/utils/mixin'

import { indexInfo } from '@/api/loanApi'








export default {
  name: 'Analysis',
  mixins: [mixinDevice],
  components: {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    NumberInfo,
    MiniSmoothArea,
  },
  data() {
    return {
      register:0,
      loading: true,
      price:0,
      loanLog:0,
      withdraw:0,
      sms:0,
      withdrawSum:0,loanLogSum:0,registerSum:0,smsSum:0


    }
  },
  created() {
   
  },
  mounted(){
   this.indexInfoFunction()
  },
  methods:{
      indexInfoFunction() {
      this.loading = true
      indexInfo()
        .then((response) => {
          this.register=response.data.register
          this.withdraw=response.data.withdraw
          this.price=response.data.price
          this.loanLog=response.data.loanLog       
          this.sms=response.data.sms

          this.registerSum=response.data.registerSum
          this.withdrawSum=response.data.withdrawSum
          this.priceSum=response.data.priceSum
          this.loanLogSum=response.data.loanLogSum       
          this.smsSum=response.data.smsSum

           this.loading = false
        })
        .catch((error) => {
          this.loading = false
        })
    },
  }
}
</script>

<style lang="less" >
.indexCenter {
  padding: 15px;
  display: flex;
  flex-direction: row;
}
.indexCentera {
  padding: 15px;
}
</style>
